<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router';
import { menuRoutes } from '@/router';
import {ref, watch} from 'vue';
import TarotIcon from "@/components/TarotIcon.vue";

const router = useRouter();
const route = useRoute();

// 创建一个响应式变量来存储默认的菜单项
const defaultMenuPath = ref<Array<string>>([''] as Array<string>);

// 创建一个响应式变量来存储当前应该高亮的菜单项
const selectedMenuPath = ref<Array<string>>([''] as Array<string>);

/**
 * @description 点击菜单
 * @param key 路由路径
 * @author xincan
 */
const onClickMenuItem = (key: string) => {
  router.replace({path: key});
};

/**
 * @description 监听路由变化，并更新当前应该高亮的菜单项
 * @author xincan
 */
watch(route, (to) => {
  selectedMenuPath.value = [to.path];
}, { immediate: true })
</script>

<template>
  <a-layout-sider breakpoint="lg" :width="60" :collapsed="false">
      <div class="logo">
        <tarot-icon name="logo" size="100%" />
      </div>
      <a-menu :defaultSelectedKeys="defaultMenuPath" :selectedKeys="selectedMenuPath" @menuItemClick="onClickMenuItem">
        <a-tooltip v-for="item in menuRoutes" :key="item.path" :content="item.meta.tooltip" position="right" >
          <a-menu-item :key="item.path" v-show="!item.meta.hideInMenu">
            <component :is="item.meta.icon" />
          </a-menu-item>
        </a-tooltip>
      </a-menu>
</a-layout-sider>
</template>

<style lang="scss" scoped>

.logo {
  width: 60px;
  height: 48px;
  padding: 4px 8px;
  background: transparent;
  color: var(--theme-primary);
  transition: color 0.3s ease;
}

.arco-layout-sider {
  background-color: var(--theme-bg)!important;
  .arco-menu {
    background: transparent!important;
    color: var(--color-text-3);
    text-align: center;

    .arco-menu-inner {
      background: transparent!important;
      overflow: hidden;

      .arco-menu-item {
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 6px auto;
        border-radius: 4px;
        transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
        background: transparent;
        color: var(--color-text-2);
        padding: 0 4px;

        .arco-icon {
          font-size: 22px;
          margin: 0;
          color: var(--color-text-3);
          transition: color 0.2s ease;
        }

        &:hover {
          background: var(--theme-primary);
          color: var(--color-white);
          :deep(.arco-icon) {
            color: var(--color-white) !important;
          }
        }

        &:active {
          transform: scale(0.95);
        }

      }

      .arco-menu-selected {
        background: var(--theme-primary)!important;
        color: var(--color-white);
        :deep(.arco-icon) {
          color: var(--color-white) !important;
        }
      }

      &:empty {
        display: none;
      }
    }
  }
}


:deep(.arco-tooltip) {
  font-size: 14px;
}

</style>
